<template>
  <div class="flex flex-wrap align-center justify-between min-h-[38px] bg-header-bg w-[100%] rounded-[8px] pt-1 pb-1">
    <!-- 左側 -->
    <div class="pl-4 pr-4 flex align-center flex-grow" :class="mobile ? 'justify-center' : 'justify-start'">

      <!-- 縂列 -->
      <span class="text-text--secondary text-[12px] font-[400] leading-[16px] mr-4">
        {{ options.cpage == 1 ? 1 : (options.cpage - 1) * options.pagesize }}
        -
        {{ pageStop }}
        <span>{{ $t('text_row') }}</span>
        <span class="pl-1">
          ({{ $t('text_total') }}
          <span>{{ options.totalcount }}</span>
          {{ $t('text_row') }})
        </span>
      </span>

      <div>
        <v-divider vertical length="20"></v-divider>
      </div>

      <div class="flex align-center">
        <!-- 每頁顯示 -->
        <span class="text-text--secondary text-[12px] font-[400] leading-[16px] ml-4 mr-4">
          <span v-if="mobile == false">{{ $t('text_display_per_page') }}</span>
        </span>

        <v-menu location="top" :disabled="props.disabled">
          <template v-slot:activator="{ props }">
            <v-btn v-bind="props" :disabled="props.disabled"
              class="!pl-2 !pr-1 !h-[28px] !min-w-[auto] !shadow-none rounded-[5px] border">
              <div class="flex">
                <div class="mr-1 min-w-[24px]">{{ options.pagesize }}</div>
                <svg-icon iconClass="menu-down-grey" size="20"></svg-icon>
              </div>
            </v-btn>
          </template>

          <v-list>
            <v-list-item v-for="item in options.selectlist" :key="item" @click="setPerPage(item)">
              <v-list-item-title>{{ item == -1 ? options.pagesize : item }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </div>

    </div>

    <!-- 右側 -->
    <div class="my-pagination flex flex-grow" :class="mobile ? 'justify-center' : 'justify-end'">
      <v-pagination :disabled="props.disabled" v-model="options.cpage" circle :class="{
        'text-text--primary': !props.disabled,
        'text-text--secondary': props.disabled
      }" :length="options.totalpage ? options.totalpage : 1" :total-visible="mobile ? 5 : 7" />
    </div>

  </div>
</template>


<script lang="ts" setup>
/*  @info 分页器
*  options 结构
*  options: {  //必填
      pagesize: 5,//条数
      cpage: 1,  //当前页数
      totalcount: null, //总条数
      totalpage: null, //总页数
      selectlist: [5, 10, 15, 20]
    }
*/
import { ref, computed, nextTick } from "vue";
const emit = defineEmits(["change"]);

import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()

const pageStop = computed(() => {
  if (options.value.cpage == options.value.totalpage) {
    return options.value.cpage == 1
      ? options.value.totalcount
      : (options.value.cpage - 1) * options.value.pagesize +
      (options.value.totalcount -
        (options.value.cpage - 1) * options.value.pagesize)
  } else {
    return options.value.cpage * options.value.pagesize
  }
})

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})

const options = defineModel("options", {
  type: Object,
  required: true,
  default: () => {
    return {
      pagesize: 5,//条数
      cpage: 1,  //当前页数
      totalcount: null, //总条数
      totalpage: null, //总页数
      selectlist: [5, 10, 15, 20]
    }
  }
});

/**
 * @description: 改变每页条数
 * @param {type}
 * @return:
 */
function setPerPage(perpage) {
  if (options.value.pagesize == perpage) return;
  nextTick(() => {
    options.value.pagesize = perpage;
    options.value.cpage = 1;
  })
}
</script>

<style scoped>
.my-pagination :deep(.v-btn--icon.v-btn--density-default) {
  width: 30px;
  height: 30px;
  opacity: 1;
}

.my-pagination :deep(.v-pagination__list li) {
  margin-top: 0;
  margin-bottom: 0;
}

.my-pagination :deep(.v-pagination__list li .v-btn--icon) {
  border-radius: 10px;
}

.my-pagination :deep(.v-pagination__item--is-active .v-btn--icon.v-btn--density-default) {
  background-color: #BDBDBD;
  color: #ffffff;
}

.my-pagination :deep(.v-pagination__next .v-btn__content) {
  margin-top: 2px;
}

.my-pagination :deep(.v-pagination__prev .v-btn__content) {
  margin-top: 2px;
}
</style>
